import React from 'react';
import {Form, Input, Button, Select, Table, Modal, Popover, Pagination, Message, Icon, DatePicker, Row, Col  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

let List = React.createClass({

    getInitialState() {
        return {
            visible: false,
            data: [],
            forms: {},
            paramData: [],
            rentContractId: '',
            pagination: {
                current: 1,
                pageSize: 5
            },
            detailData:[],
            record:[],

        }
    },

    componentDidMount() {
      //  this.handleSearch()
    },


    fetch(param){
        let _me = this;
        let page = this.state.pagination.current;
        let rentContractId = this.state.record.rentContractId;
        let params = Object.assign({}, {pageSize: 5, currentPage: page }, {rentContractId: rentContractId});
        Utils.sendAjax({
            url: '/renter/bill/detail',
            data: JSON.stringify(params),
            callback: function(result) {
                if (result.code == '200') {
                    _me.setState({
                        detailData:  result.data,
                        pagination: result.page
                    })
                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },


    componentWillReceiveProps(nextProps) {
        console.log(nextProps);
        
        let pager = this.state.pagination;
        pager.total = nextProps.pagination.total;
        this.setState({
            visible: nextProps.visible,
            record: nextProps.record,
            rentContractId: nextProps.rentContractId,
            detailData: nextProps.detailData,
            pagination: pager,
            data: []
        })
    },

    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager,
        });
        this.handleSearch();
    },

    handleCancel() {
        this.props.callHide();
        this.handleReset();
        const pager = this.state.pagination;
        pager.current = 1;
        this.setState({
            data: [],
            pagination: pager
        })
    },

    handleSearch() {
        this.fetch();
    },
    handleReset() {
        this.setState({
            forms: {
                costTypeId : '',
                startTime: null,
                endTime: null,
            }
        });
    },

    rowKey(data) {
        console.log(data);
        return data.recordId;
    },
    render() {



        const { getFieldProps } = this.props.form;

        const columns = [
            {
                title: '账单期限（月）',
                dataIndex: 'rentPeriod',

            },{
                title: '应出账单金额（元）',
                dataIndex: 'collectAmount'
            },{
                title: '实际账单金额（元）',
                dataIndex: 'receivedAmount'
            },{
                title: '应收款日',
                dataIndex: 'rentTime'
            },{
                title: '实际收款日',
                dataIndex: 'payTime'
            },{
                title: '支付状态',
                dataIndex: 'status',
                render: (text, record) => {
                    // let obj ={
                    //     '1': '已付款',
                    //     '-1': '未付款',
                    // }
                    return (
                      <span>{record.status == 1 ? '已付款' : '未付款'}</span>

                    );
                }

            },

        ];

        let record = this.state.record;
        return (
            <Modal title="查看账单" visible={this.state.visible}
                   onOk={this.handleOk}  onCancel={this.handleCancel} width={900}
                   footer=""
            >
                <Form inline>
                    <Row gutter={16}>
                        <Col span={8}>
                            <FormItem label="房屋地址">
                                <span>{record.address}</span>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="租客姓名">
                                <span>{record.renterName}</span>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="联系电话">
                                <span>{record.renterPhone}</span>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={8}>
                            <FormItem label="房屋租金">
                                <span>￥{record.rent}</span>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="租赁方式">
                                <span>押{record.depositPeriod} 付 {record.rentPeriod}</span>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.detailData}
                       onChange={this.handleTableChange}
                       pagination={this.state.pagination}/>
            </Modal>
        );
    }
});
List = Form.create()(List)
export default List